<template>
  <div class="footer-div">
    <div class="console">
      <el-button type="text" @click="toggleConsole">
        <svg-icon icon-class="console" />
      </el-button>
    </div>
    <div style="width:30%;display:flex;">
      <!-- <span class="xyz">坐标：({{ mousePos.x }}, {{ mousePos.y }}, {{ mousePos.z }})</span> -->
      <div v-if="progressPercentage>0" class="progress">
        正在保存:&nbsp;&nbsp;
        <el-progress :percentage="progressPercentage" :status="status" />
      </div>
    </div>

    <div class="box-item">
      <span>Copyright © 2020&nbsp;&nbsp;</span>
      <a href="http://www.lntu.edu.cn" target="_blank">辽宁工程技术大学 - 安全科学与工程学院</a>
      <div class="button-group-div">
        <panel-bar
          :key="buttonKey"
          :panels="buttons"
          :background="panelBarItemBgStyle"
          :on-panel-state-init="onButtonStateInit"
          :on-panel-state-will-change="onButtonStateWillChange"
          style="flex:1;"
        />
        <div class="slider-div" style="flex:1;">
          <div class="scale">{{ scale }}%</div>
          <div class="button" @click="() => onClick(scale-10)">
            <svg-icon icon-class="minus" />
          </div>
          <el-slider
            v-model="scale"
            :min="0.01"
            :max="500"
            :show-tooltip="false"
            style="flex:1;"
            @input="val => onInput(val)"
          />
          <div class="button" @click="() => onClick(scale+10)">
            <svg-icon icon-class="plus" />
          </div>
          <div class="button" @click="onZoomFit">
            <svg-icon icon-class="center" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import StyleConfig from '../config/style'
import PanelBar from '../components/panel-bar'
import { makeUUID } from '@/utils'

export default {
  name: 'EditorFooter',
  components: { PanelBar },
  data() {
    return {
      // customColor: '#d8d8d8',
      // percentage: 90,
      scale: 100,
      buttonKey: makeUUID(),
      options: [
        {
          name: 'grid',
          title: '网格',
          icon: 'table',
          state: true
        },
        {
          name: 'pointer',
          title: '选择',
          icon: 'mouse-pointer',
          state: true
        },
        {
          name: 'node',
          title: '节点',
          icon: 'circle-thin',
          state: false
        },
        {
          name: 'link',
          title: '分支',
          icon: 'link',
          state: false
        }
      ]
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      mode: 'mode',
      grid: 'grid',
      consoleState: 'consoleState',
      // mousePos: 'mousePos',
      diagramScale: 'scale',
      progressPercentage: 'progressPercentage',
      progressError: 'progressError'
    }),
    buttons() {
      const arr = [...this.options]
      arr.forEach(item => {
        if (item.name === 'grid') {
          item.state = this.grid
        } else {
          item.state = this.mode === item.name
        }
      })
      return arr
    },
    status() {
      // console.log('progress error:', this.progressError)
      return this.progressError ? 'warning' : null
    },
    panelBarItemBgStyle() {
      return StyleConfig.Panel
    }
  },
  watch: {
    progressPercentage(val) {
      console.log('进度:', val)
      // if (parseInt(val) === 100) {
      //   const that = this
      //   setTimeout(() => {
      //     // 设置进度为0, 隐藏进度条
      //     that.updateProgress(0)
      //   }, 1000)
      // }
    },
    diagramScale(val) {
      this.scale = val
    },
    mode(val) {
      // 强制刷新按纽组
      this.buttonKey = makeUUID()
    }
  },
  created() {
    this.scale = this.diagramScale
  },
  methods: {
    ...mapActions('editor/diagram', {
      showConsole: 'showConsole',
      updateProgress: 'updateProgress',
      setMode: 'setMode',
      showGrid: 'showGrid',
      setScale: 'setScale',
      callFunction: 'callFunction'
    }),
    toggleConsole() {
      // console.log('toggleConsole', this.consoleState)
      this.showConsole(!this.consoleState)
    },
    onButtonStateInit(button) {
      // const { name, state } = button
    },
    // 用户点击按钮触发事件
    // 子组件ButtonItem发送onButtonStateChange消息)
    onButtonStateWillChange(button) {
      // console.log(button, this.mode, this.buttons)
      const { name, toggleState } = button
      // 切换状态
      toggleState()
      // 切换gojs状态
      if (name === 'grid') {
        this.showGrid(!this.grid)
      } else {
        this.setMode(name).then(() => {
          // 强制刷新按纽组
          this.buttonKey = makeUUID()
        })
      }
    },
    onClick(val) {
      if (val < 0) {
        val = 0
      } else if (val > 500) {
        val = 500
      } else {
        // 取出百位：parseInt(num/100)
        // 取出十位：parseInt((num%100)/10)
        // 取出个位：parseInt(num%10)
        val = val - parseInt(val % 10)
      }
      // console.log('scale:', this.scale)
      this.scale = val
      this.setScale(val)
    },
    onInput(val) {
      this.scale = val
      // console.log('oninput:', val)
      this.setScale(val)
    },
    onZoomFit() {
      this.callFunction({ sCmd: 'ZoomFit', args: null })
    }
  }
}
</script>

<style lang="scss">
// @import '../style/variable.scss';
.footer-div {
  height: inherit;
  display: flex;
  align-items: center;

  .console {
    height: inherit;
    margin-left: 1px;
    .el-button {
      padding: 0 6px !important;
      border: none !important;
      vertical-align: middle !important;
    }

    .svg-icon {
      width: 1.5em !important;
      height: 1.5em !important;
    }
  }

  .xyz {
    width: 240px;
    margin-left: 9px;
    // margin-right: 30px;
  }

  .progress {
    width: 220px;
    // margin-right: 20px;
    display: flex;
    align-items: center;
  }
  .el-progress {
    flex: 1;
    // div垂直居中(前提: position: relative;)
    // top: 50% !important;
    // transform: translateY(-50%) !important;

    .el-progress__text {
      font-size: 12px !important;
    }
  }

  a {
    text-decoration: none;
  }

  .box-item {
    flex-grow: 1;
  }
  .button-group-div {
    position: absolute;
    right: 12px;
    bottom: 0px;
    height: 24px;
    width: 480px;
    line-height: 24px;
    display: flex;
    align-items: center;

    // .box-item {
    //   flex-grow: 1;
    // }

    .scale {
      width: 32px;
      margin: 0 0px;
    }

    .button {
      width: 18px;
      margin: 0 4px;
      line-height: 0px;

      &:hover {
        background-color: #d9d9d9;
      }
      svg {
        width: 1.5em !important;
        height: 2em !important;
      }
    }
    .slider-div {
      display: flex;
      align-items: center;
      // width: 240px;

      .el-slider__runway {
        width: 100%;
        height: 2px;
        margin: 11px 0 !important;
        background-color: #dfe4ed;
        border-radius: 3px;
        cursor: default;

        .hover {
          cursor: default !important;
        }
        .el-slider__button-wrapper {
          height: 24px !important;
          width: 24px !important;
          position: absolute;
          z-index: 1001;
          top: -11px !important;

          &:hover {
            cursor: default !important;
          }
          .el-slider__button {
            width: 12px !important;
            height: 12px !important;
            border: solid 1px #1890ff !important;
            background-color: #fff !important;
            border-radius: 100% !important;
          }
        }
      }

      .el-slider__bar {
        height: 2px !important;
        background-color: #1890ff;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        position: absolute;
      }
    }
  }
}
</style>
